<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <div class="Container100 TexAlCenter"><i class="icon-mountains14 Red Fs130 MarTop20" style="line-height:1 !important;"/></div>
                            <h1 class="TexAlCenter Fs40 Red">Olympos Documentation</h1>
                            <div class="EmptyBox40"/>
                            <p:panel>
                                <div class="Fs20 Red">Installation</div>
                                <p>
                                    Olympos provides a main <i>template.xhtml</i> and additional xhtml fragments for the base layout.
                                    These 3 files must be placed under WEB-INF folder.
                                    Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder.
                                    Other required resources are the css, js, image and font files that are located inside resources/olympos-layout folder,
                                    simply copy the olympos-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/olympos-layout/.
                                    Please refer to demo app or maven project of the demo app as the reference.
                                </p>
                                <p>
                                    Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME context parameter in web.xml as "olympos",
                                    refer to <a class="Blue FontLatoBold" href="http://www.primefaces.org/themes">themes page</a> for more information.
                                </p>

                                <div class="Fs20 Red">Background Colors</div>
                                <p>
                                    Olympos Layout has 9 different topbar colors, Navy, Leaden, Red, Green, Orange, Yellow, Purple, Blue, Aqua.
                                    Class name of each alternative to be applied to the h:body component are <span class="FontLatoBold Orange"> 'NavyTopbar', 'LeadenTopbar', 'RedTopbar', 'GreenTopbar', 'OrangeTopbar', 'YellowTopbar', 'PurpleTopbar', 'BlueTopbar', 'AquaTopbar'</span>
                                </p>

                                <div class="Fs20 Red">Menu Modes</div>
                                <p>
                                    There are three alternatives for menu orientation, default mode is inline where menu is displayed at the left side of layout, second option
                                    is overlay menu as a popup and last alternative is slim menu where menu displays the submenus on mouseover.
                                    Class names to be applied on h:body component for the Popup and Slim modes are <span class="FontLatoBold Orange"> 'PopupMenu' and 'SlimMenu'.</span>
                                </p>

                                <div class="Fs20 Red">Core Layout</div>
                                <p>
                                    Core Layout is a set of CSS classes used to create responsive grid layouts with additional utilities.
                                    Olympos uses Core Layout internally, however for grid layout
                                    you may also choose another utility like <a class="FontLatoBold Blue" href="http://www.primefaces.org/showcase/ui/panel/grid.xhtml">Grid CSS</a>
                                    or <a class="FontLatoBold Blue" href="http://getbootstrap.com/examples/grid/">Bootstrap Grid</a>.
                                </p>

                                <div class="Fs20 Red">Migration Guide</div>
                                <div class="EmptyBox10"/>
                                <div class="Fs15 red">1.0 to 1.1</div>
                                <ul>
                                    <li>- Replace theme.jar with new jar</li>
                                    <li>- Update olympos-layout.css</li>
                                </ul>
                            </p:panel>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>